<template>
  <div class="main">
    <el-card>
      <template #header>
        <div>组织架构</div>
      </template>
      <div class="container">
        <tree :item="defaulttree" />
        <hr>
        <el-tree
          :data="treeData"
          :props="{ label: 'name', children: 'children' }"
        >
          <template v-slot="{ data }">
            <tree
              :item="data"
              style="width: 100%"
              @getData="getData"
            /> </template></el-tree>
      </div>
    </el-card>
    <add :init-tree-data="initTreeData" @getData="getData" />
  </div>
</template>

<script>
import { companyDepartment } from '@/api/department'
import tree from './component/tree.vue'
import Add from './component/add.vue'
export default {
  components: { tree, Add },
  data() {
    return {
      initTreeData: [],
      defaulttree: {
        name: 'web67',
        manager: '负责人',
        top: true,
        id: ''
      },
      treeData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await companyDepartment()
      this.defaulttree.name = res.data.companyName
      this.treeData = this.changeData(res.data.depts, '')
      this.initTreeData = res.data.depts
      console.log(res.data.depts, '组织架构')
    },
    changeData(arr, str = '') {
      return arr.filter((item) => {
        if (item.pid === str) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 15px;
  font-size: 14px;
}
.container {
  width: 80%;
  margin: 0 auto;
}
</style>
